<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        window.onload = function (){
            init();
        }

        async function init(){
            var info = await ajaxGet("/user/getLoginUser");
            if(info != null && info != ''){
                $("infoDiv").innerHTML = `欢迎光临，${info.name} <a href="/html/custom/shop.html">查看购物车</a>`;
            }
            else{
                $("infoDiv").innerHTML = `你好，请先<a href="/html/login.html">登陆</a>`;
            }
            findProduct(1);
        }

        async function  findProduct(pageNO){
            var info = await ajaxGet("/product/findByItem",{
                pageNO,
                name:$("name").value,
                startDate:$("startDate").value,
                endDate:$("endDate").value
            });
            //显示商品
            var str = "";
            for(var i=0;i<info.list.length;i++){
                var obj = info.list[i];
                str += `<div style="text-align: center;width: 400px;">
                        <img src="/html/img/${obj.img}" width="200" height="260px"><br>
                        ${obj.name}<br>
                        单价：${obj.money}<br>
                        已售出：${obj.number}<br>
                        <a href="javascript:buy(${obj.id})">购买</a>
                    </div>`;
            }
            $("productDiv").innerHTML = str;
            //显示页码
            var cutStr = "";
            for(var i=1;i<=info.pages;i++){
                cutStr += `<a style="margin-left: 10px"
                        href="javascript:findProduct(${i})">${i}</a>`;
            }
            $("cutDiv").innerHTML = cutStr;
        }

       async function buy(id){
            var info = await ajaxGet("/shop/buy",{productId:id});
            if(info == "ok"){
                location.href = "/html/custom/shop.html";
            }
        }
    </script>
</head>
<body>
    <div id="infoDiv"></div>
    <div>
        商品名：<input type="text" id="name">
        生产起始日期：<input type="text" id="startDate">
        生产结束日期：<input type="text" id="endDate">
        <input type="button" onclick="findProduct(1)" value="搜索">
    </div>
    <div id="productDiv" style="display: flex;height: 400px;"></div>
    <div id="cutDiv"></div>
</body>
</html>